<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title> 
    <link href="../css/mui.min.css" rel="stylesheet"/> 
    <style type="text/css">
		.chat-history-date{ 
			display: block;
			padding-top: 5px;
			text-align: center;
			font-size: 12px;
		}
		.chat-receiver,.chat-sender{
			margin: 5px;
		    clear:both;  
		}
		.chat-receiver .chat-avatar{
			float: left;
		}
		.chat-sender .chat-avatar{
			float: right;
		}
		.chat-avatar img{
		    width: 40px;
		    height: 40px;
		    border-radius: 50%;
		}
		.chat-content{
			position: relative;
			max-width: 60%;
		    min-height: 20px;
			margin: 0 10px 10px 10px;
		    padding: 10px;
		    font-size:15px;
		    border-radius:7px; 
		}
		.chat-content img{
			width: 100%;
		}
		.chat-receiver .chat-content{
			float: left; 
			color: #383838; 
		    background-color: #f5f5f5;
		}
		.chat-sender .chat-content{
		    float:right;   
		    color: #ffffff; 
		    background-color: #15b5e9; 
		}
		.chat-triangle{
			position: absolute;
			top:6px;
			width:0px; 
			height:0px; 	   
		    border-width:8px; 
		    border-style:solid;   
		}
		.chat-receiver .chat-triangle{ 
			left:-16px;
		    border-color:transparent #f5f5f5 transparent transparent;      
		}
		.chat-sender .chat-triangle{ 
			right:-16px;
		    border-color:transparent transparent transparent #15b5e9;      
		}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">聊天</h1>
	</header>
	<div class="mui-content">
        <div id="msg-list">
			
		</div>   
	</div>
	
	<script id="msg-tpl" type="text/html">
		<div class="chat-{{who}}">
        	<div class="chat-avatar">
        		<img src="{{avatar}}">
        	</div>
        	<div class="chat-content">
        		<div class="chat-triangle"></div>
        		{{if type=="text"}}
				    <span>{{msg}}</span>
				{{else if type=="url"}}
				    <a href="{{msg}}">{{msg}}</a>
				{{else if type=="img"}}
					<img src="{{msg}}"/>
				{{/if}}
        	</div>
        </div>
	</script>
	
	<script src="../js/mui.min.js"></script>
	<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="UTF-8">
      	mui.init();
      	
      	// 页面传参数事件监听
		window.addEventListener('chat',function(event){
			// 获得事件参数
			var username = event.detail.username;
			mui.toast(username);
    	});
    	
    	/**
		 * @description 显示消息
		 * @param {String} who 消息来源,可选参数: {params} 'sender','receiver'
		 * @param {Object} type 消息类型,可选参数: {params} 'text','url','img'
		 * @param {JSON} data 消息数据,可选参数: {params} {{el:'消息容器选择器'},{senderAvatar:'发送者头像地址'},{receiverAvatar:'接收者头像地址'},{msg:'消息内容'}}
		 * ('text'和'url'类型的msg是文字，img类型的msg是img地址)
		 */
    	var appendMsg = function(who,type,data){
    		var html = template('msg-tpl', {
    			who: who,
    			type: type,
    			avatar: who=='sender'?data.senderAvatar:data.receiverAvatar,
    			msg: data.msg
    		});
			document.querySelector(data.el).innerHTML += html;
    	}
    </script>
</body>
</html>